<template>
  <div>
    <!--    {{ 5 + 5 }}<br>-->
    <!--    {{ ok ? 'YES' : 'NO' }}<br>-->
    <!--    {{ userText.split('').reverse().join('') }}-->
    <!--    <div v-bind:id="'list' + id">菜鸟教程</div>-->
    <!--    <input v-model="userText" placeholder="请输入"><br>-->
    <!--    <input type="button" @click="test()" value="更改">-->
    <el-dialog
        :visible.sync="orderShow"
        width="60%"
        @opened="open"
    >
      <!--      <Order :movie-id="movieId" v-if="orderShow2" ref="orderRef"></Order>-->
      <order :movie-id="movieId" v-if="orderShow2" ref="orderRef"></order>
    </el-dialog>
    <el-row>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>电影</span>
              </template>
              <el-menu-item-group>
                <!--              <template slot="title">电影售前</template>-->
                <el-menu-item index="1-1" @click="showEl(1)">购买电影票</el-menu-item>
                <el-menu-item index="1-2" @click="showEl(2)">查看订单</el-menu-item>
              </el-menu-item-group>
              <!--            <el-submenu index="1-4">-->
              <!--              <template slot="title">选项4</template>-->
              <!--              <el-menu-item index="1-4-1">选项1</el-menu-item>-->
              <!--            </el-submenu>-->
            </el-submenu>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">导航二</span>
            </el-menu-item>
            <el-menu-item index="3" disabled>
              <i class="el-icon-document"></i>
              <span slot="title">导航三</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>

      <el-col :span="20">
        <div class="grid-content bg-purple-light">
          <!--        <show v-show="tshow"></show>-->
          <!--        <index v-show="tindex"></index>-->
          <el-row>
            <el-button type="primary" plain style="margin-left: -70%" @click="updateData">更改</el-button>
          </el-row>
          <el-table
              :data="listData"
              style="width: 100%"
              v-show="tshow"
              highlight-current-row
              @current-change="updateShow">
            <el-table-column
                prop="id"
                label="订单编号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="filmBean.name"
                label="商品名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="filmBean.time"
                label="电影上映时间">
            </el-table-column>
            <el-table-column
                prop="filmBean.money"
                label="电影价格">
            </el-table-column>
            <el-table-column
                prop="filmBean.number"
                label="电影购买数量">
            </el-table-column>
            <el-table-column
                prop="filmBean.sumMoney"
                label="电影总价格">
            </el-table-column>

            <!--            <el-table-column-->
            <!--                label="操作">-->
            <!--              <template>-->
            <!--                <el-popconfirm-->
            <!--                    title="确定购买吗？"-->
            <!--                    @confirm="buy(filmBean)"-->
            <!--                >-->
            <!--                  <el-button type="primary" slot="reference" icon="el-icon-plus">购买</el-button>-->
            <!--                </el-popconfirm>-->

            <!--                <el-button type="primary" style="margin-left: 10px" icon="el-icon-reading">查看</el-button>-->
            <!--              </template>-->
            <!--            </el-table-column>-->

            <el-table-column
                label="操作"
                width="280"

            >
              <template slot-scope="scope">
                <el-button type="primary" slot="reference" icon="el-icon-shopping-cart-full" @click="buy(scope.row)">购买
                </el-button>
                <el-button type="primary" slot="reference" style="margin-left: 10px" icon="el-icon-shopping-cart-full"
                           @click="lookOrder(scope.row)">查看订单
                </el-button>
              </template>


              <!--              <template>-->
              <!--                <el-popconfirm-->
              <!--                    title="确认购买？"-->
              <!--                    @confirm="buy(id)"-->
              <!--                >-->
              <!--                  <el-button type="primary" slot="reference" icon="el-icon-shopping-cart-full">购买 </el-button>-->
              <!--                </el-popconfirm>-->

              <!--                <el-button type="primary" style="margin-left: 10px"  icon="el-icon-reading" @click="lookOrder(movieId)">查看订单 </el-button>-->
              <!--              </template>-->
            </el-table-column>
          </el-table>

          <el-table
              :data="listShow"
              style="width: 100%"
              v-show="tindex">
            <el-table-column
                prop="name"
                label="电影名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="time"
                label="电影上映时间"
                width="180">
            </el-table-column>
            <el-table-column
                prop="money"
                label="电影价格">
            </el-table-column>
            <el-table-column
                prop="number"
                label="电影购买数量">
            </el-table-column>
            <el-table-column
                prop="sumMoney"
                label="电影总价格">
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <div class="block">
      <span class="demonstration">页数</span>
      <el-pagination
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
      >
      </el-pagination>

      <el-dialog title="收货地址" :visible.sync="ShowYesNo">
        <el-form label-width="80px">
          <el-form-item label="电影名">
            <el-input v-model="movieName" size="50"></el-input>
          </el-form-item>
          <el-form-item label="日期">
            <el-input v-model="movieDate" size="50"></el-input>
          </el-form-item>
          <el-form-item label="电影总价">
            <el-input v-model="movieSum" size="50"></el-input>
          </el-form-item>
        </el-form>
        <el-button icon="el-icon-search" style="margin-left: 69%" @click="searchMovie">搜索</el-button>
      </el-dialog>
    </div>

    <div class="block">
      <span class="demonstration">默认 Hover 指示器触发</span>
      <el-carousel height="150px">
        <el-carousel-item v-for="(img,index) in imgList" :key="index">
          <img v-bind:src="img.url" width="200px" height="200px">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--        <div class="block">-->
    <!--          <span class="demonstration">Click 指示器触发</span>-->
    <!--          <el-carousel trigger="click" height="150px">-->
    <!--            <el-carousel-item v-for="item in 4" :key="item">-->
    <!--              <h3 class="small">{{ item }}</h3>-->
    <!--            </el-carousel-item>-->
    <!--          </el-carousel>-->
    <!--        </div>-->
  </div>
</template>

<script>

// import Index from "./index";
// import show from "./showf.vue";
// import Show from "./showf";
import Show from "../components/showf.vue";
import index from "../components/index.vue";
import Order from "./order";

export default {
  name: "test",
  components: {Order},
  // components: {Show, index},
  // components: {Show},
  // components: {Index},
  data() {
    return {
      ok: true,
      message: '',
      userText: "",
      tshow: true,
      tindex: false,
      imgList: [{url: require('../../public/c1.jpg')},
        {url: require('../../public/c2.jpg')},
        {url: require('../../public/c3.jpg')},
        {url: require('../../public/java.jpg')}],
      listData: [],
      listShow: [],
      total: 0, //总行数
      pageSize: 7,//每页显示的行数
      currentPage: 1, //当前页
      tableData: [], //分页后的集合
      currentRow: '',
      ShowYesNo: false,
      movieName: '',
      movieDate: '',
      movieSum: '',
      id: 0,
      orderShow2: false,
      movieId: 0,
      orderShow: false,
    }
  },
  mounted() {
    console.log(this.$route.query.jack)
    console.log(this.$route.params.userName)
    console.log("初始化")
    console.log(sessionStorage.getItem('jack'))
    console.log(sessionStorage.getItem('som'))
    this.handleCurrentChange(this.currentPage)
  },
  methods: {
    // show: async function () {
    //
    //   await this.$axios.get('tm/tianmao/findAll/' + this.currentPage + "/" + this.pageSize).then(
    //       r => {
    //         this.listData = r.data.Records;
    //       }
    //   )
    //   console.log(this.listData)
    //   await this.$axios.get('api2/film/findByAll').then(
    //       r => {
    //         this.listShow = r.data;
    //       }
    //   )
    //   console.log(this.listShow)
    // },
    // ret: async function () {
    //   location.href = "/index"
    // },
    showEl(tog) {
      if (tog == 1) {
        this.tshow = true
        this.tindex = false
      }
      if (tog == 2) {
        this.tindex = true
        this.tshow = false
      }
    },
    handleCurrentChange(val) {
      if (this.tshow == true) {
        this.tindex = false;
        this.currentPage = val;
        this.$axios.get('tm/tianmao/findAll/' + this.currentPage + "/" + this.pageSize).then(
            r => {
              this.listData = r.data.records;
              console.log(this.listData)
              this.total = r.data.total
            }
        )
        console.log(this.listData)
      }
      if (this.tindex == true) {
        this.tshow == false
        this.$axios.get('api2/film/findByAll').then(
            r => {
              this.listShow = r.data;
            }
        )
      }
    }
    , updateShow(val) {
      this.currentRow = val;
      console.log(this.currentRow)
      // this.ShowYesNo=true;
      // // this.movieName=val.
    },
    updateData() {
      if (this.currentRow == '') {
        alert("请选中一行")
      }
      if (this.currentRow != '') {
        this.movieName = this.currentRow.filmBean.name;
        this.movieSum = this.currentRow.filmBean.sumMoney;
        this.movieDate = this.currentRow.filmBean.time;
        this.ShowYesNo = true;
      }
    },
    buy(row) {
      console.log(row)
    },
    lookOrder(row) {
      this.orderShow = true;
      this.orderShow2 = true;
      this.movieId = row.id;
      this.$store.state.mid = row.id
    },
    open(){
      this.$nextTick(()=>{
        this.$refs.orderRef.init(this.movieId)
      })
    }
  }

}

</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>